iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
自我挑戰組

PHP框架-Laravel自學挑戰系列 第 27

DAY 27 - resume builder: 將resume更新至GitHub README (中)OAuth Token and Scope

  • 分享至 

  • xImage
  •  

哈囉大家好~
沒想到昨天沒有辦法順利完成功能,所以只能先發一些廢話衝字數來敷衍(?
昨天撰寫完發送PUT Request後,測試時發現更新的內容一直在GitHub personal README profile看不到,發現原來請求一直沒有發送成功(因為token的問題!)

在正式開始說明程式碼之前,想要說明一下發送GitHub API時的注意事項!
根據官方文檔,我打的這隻API需要在header中加上Token,其中Token有兩種,分別是:

  1. OAuth APP token
  2. Personal Access Token(PAT)
    其中Personal Access Token 有分成Fine-grained tokens和Tokens(classic)。Personal Access Token需要在個人GitHub帳戶中進行設定,但這個token是授權讓別人可以對「設定此操作的GitHub帳戶」進行操作。

之前沒有仔細閱讀文檔的我一直誤會Personal Access Token可以讓使用者透過resume builder來編輯他們自己的GitHub帳號中的內容,但其實他們只能透過Personal Access Token來更新那個設定token的GitHub帳號(也就是我的帳號XD)

如果想要讓使用者可以透過resume builder來更新他們GitHub帳號裡面的內容,就必須使用第一種OAuth Token。
所以我必須要重新調整一下過去的程式碼,在使用者登入時,他們的GitHub帳號獲得驗證時,會獲得一個OAuth Token。為了方便之後發送API請求,首先利用migration在User資料表裡面新增oauth_token欄位:

public function up(): void
    {
        Schema::table('user', function (Blueprint $table) {
            $table->string('oauth_token')->nullable(); 

        });
    }
    public function down(): void
    {
        Schema::table('user', function (Blueprint $table) {
            $table->dropColumn('oauth_token');
        });
    }

接著和資料庫互動時會用到的Model也要調整:

protected $table = 'user'; // 指定table: user
    protected $fillable = [
      'nickname',
      'name',
      'email',
      'avatar_url',
      'oauth_token'  // 新增token欄位
    ];

當資料表都修改完成後,就要來調整登入時的邏輯。確保使用者的GitHub帳號驗證後,將OAuth Token一起存入資料表。除了儲存OAuth Token之外,也要確保有權限可以取得repo並修改內容,所以必須加上scope請求access使用者的repo。
所以Login Controller的程式碼調整部份如下:

public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)
        ->scopes(['read:user', 'repo'])
        ->redirect();
    }
public function HandleProviderCallback($provider)
    {
        $githubUser = Socialite::driver($provider)->user();

        $existingUser = User::where('email', $githubUser->email)->first();

        if ($existingUser) {
            Auth::login($existingUser);
        }else {
            $newUser = User::create([
                'nickname' => $githubUser->getNickname(),
                'name' => $githubUser->getName(),
                'email' => $githubUser->getEmail(),
                'avatar_url' => $githubUser->getAvatar(),
                'oauth_token' => $githubUser->token 
                    // 新增OAuth Token
            ]);

            Auth::login($newUser);
        }
        $github_email = $githubUser->email;
        $resumes = Resume::where('github_email', $github_email)->get();
        return view('livewire.dashboard', ['githubUser' => $githubUser,  'resumes' => $resumes]);
    }

修改完成後就可以確保OAuth Token會被存在資料表中,當需要發送GitHub API請求時就可以找到OAuth Token。


以上就是大致debug的過程!果然開始寫程式碼前還是要好好仔細閱讀文檔/images/emoticon/emoticon10.gif
下一篇會說明如何實現將resume card的內容更新到GitHub的personal README file上面,如何設定個人README profile可以參考這個連結!

那我趕快來趕下一篇XD


上一篇
DAY 26 - resume builder: 將resume更新至GitHub README (上)
下一篇
DAY 28 - resume builder: 將resume更新至GitHub README (下)發送PUT request
系列文
PHP框架-Laravel自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言